<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="less/bootstrap.css">
    <link rel="stylesheet" href="css/recharge.css"/>
</head>
<body>
<!-- header部分 -->
<div class="user">
    <div class="user_login">
        <ul class="user_zone">
            <li>
                <a href="#">wuqifan@nuagetimes.com</a>
            </li>
            <li>|</li>
            <li class="logout">
                <a href="#">登出</a>
            </li>
        </ul>
    </div>
</div>
<div class="article">
    <div class="header">
        <header role="banner" id="fh5co-header">
            <div class="fluid-container">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="home.html"></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="pingtai.html" data-nav-section="home"><span>平台介绍</span></a></li>
                            <li class="active"><a href="product.html"><span>产品中心</span></a></li>
                            <li><a href="product.html" data-nav-section="testimony"><span>个人账户</span></a></li>
                            <li><a href="#" data-nav-section="pricing"><span>帮助中心</span></a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
    </div>
</div>
<!-- header end -->


<div class="bg">
<div class="clearfix wrap">
    <ul class="breadcrumb pull-right ">
        <li>您当前的位置:</li>
        <li><a href="#">首页</a> </li>
        <li><a href="#">VPN master</a> </li>
        <li class="active">充值</li>
    </ul>
</div>
<div class="wrap clearfix">
    <div class="tabbable  memberlist recharge tablechange2">
        <div class="sidebar-menu nav nav-tabs">
            <h2>充值</h2>
            <div class="nav-header menu-first"><a href="#tab1" data-toggle="tab"> MY card</a></div>
            <div class="nav-header menu-first"><a href="#tab2" data-toggle="tab"> gash1</a></div>
            <div class="nav-header menu-first"> <a href="#tab3" data-toggle="tab"> gash3</a></div>
            <div class="nav-header menu-first"> <a href="#tab4" data-toggle="tab"> gash4</a></div>

        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                <div class="content">
                     <div class="recharge_title container-fluid">
                         <div class="row">
                             <div class="col-xs-12 col-sm-4">
                                 1NT$-1VPN Master流量
                             </div>
                             <div class="col-xs-12 col-sm-4 text-center">
                                 <i class="icon icon_small_key"></i>
                                 vpn master 流量储值
                             </div>
                             <div class="col-xs-12 col-sm-4">
                                 &nbsp;
                             </div>
                         </div>
                     </div>
                    <div class="recharge_cont">
                        <form action="">
                        <dl class="dl-horizontal">
                            <dt class="side_w100">储值账号：</dt>
                            <dd>
                                <div>
                                    <span>wuwuuwuwu</span>
                                    <a class="orange changeusername" href="javascript:;">更换账号</a>
                                </div>
                            </dd>

                        </dl>
                        <dl class="dl-horizontal">
                            <dt class="side_w100">处置方式：</dt>
                            <dd>
                                <ul class="list-inline rechange_way">
                                    <li class="on">点数卡</li>
                                    <li>点数卡</li>
                                    <li>点数卡</li>
                                    <li>点数卡</li>
                                    <li>点数卡</li>
                                    <li>点数卡</li>
                                    <li>点数卡</li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="dl-horizontal">
                            <dt class="side_w100">运营商：</dt>
                            <dd>
                                <ul class="list-inline Operator_way">
                                    <li>
                                        <label class="radio-inline">
                                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 台湾
                                        </label>
                                    </li>
                                    <li>
                                        <label class="radio-inline">
                                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 台湾2
                                        </label>
                                    </li>
                                    <li>
                                        <label class="radio-inline">
                                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 台湾3
                                        </label>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="dl-horizontal">
                            <dt class="side_w100">卡面充值：</dt>
                            <dd>
                                <ul class="list-inline recharge_num">
                                    <li class="on">
                                        <label>
                                            <input type="radio" name="recharge_id" value="55">
                                            <span>NT$1</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" name="recharge_id" value="51">
                                            <span>NT$10</span>
                                        </label>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                         <div class="line"></div>
                        <div class="container-fluid bottom">
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 text-center">
                                    应付：<b class="orange big">NT$50</b> (50M VPNmaster流量)
                                </div>
                                <div class="col-xs-12 col-sm-6 text-center">
                                    <button type="submit" class="btn orange_btn">确认付款</button>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tab2">
                <div class="content tab_describe">
                   第二栏
                </div>
            </div>
            <div class="tab-pane" id="tab3">
                <div class="content tab_describe">
                    第三栏
                </div>
            </div>
            <div class="tab-pane" id="tab4">
                <div class="content tab_describe">
                    第四栏
                </div>
            </div>

        </div>
    </div>
</div>
</div>

<!-- footer start -->
<div class="footer">
    <div class="hrs"></div>
    <div class="copyrights">
        <ul class="item_list">
            <li><a href="#"><span></span>服务条款</a></li>
            <li><a href="#"><span></span>隐私协议</a></li>
            <li><a href="#"><span></span>安全保障</a></li>
            <li><a href="#"><span></span>联系我们</a></li>
        </ul>
        <p>@2016, gainextreme.com, All Rights Reserved</p>
    </div>
</div>
<!-- footer end -->


<script data-main="js/yjj" src="js/require.js"></script>

</body>
</html>